<template>
	<view>
		<!-- 新增车辆弹窗 -->
		<u-popup v-model="showCarInfoWindow" mode="bottom" :safeAreaInsetBottom="true" :maskCloseAble="true"
		:closeable="true" height="45%" :mask="true" @close="close">
			<view class="">
				<add-car ref="addCar" @submit="submit" :caritem="car" />
			</view>
		</u-popup>
		<!-- 导航栏顶部 -->
		<view class="nav">
			<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-back="true" :background="background"
				:back-text-style="{color: '#fff'}" title="我的车辆" back-text="返回">
				<view class="navbar-right" slot="right">
					<view class="dot-box right-item" @click="openPopup">
						添加车辆
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<!-- 可用车辆 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view v-if="carList[0].length === 0" class="empty">
								<u-empty mode="data"></u-empty>
							</view>
							<car-box v-for="item in carList[0]" :car="item" @deleteCar="deleteCar" :tab="0"/>
							<u-loadmore v-if="loadStatus[0] !=='loadmore'" :status="loadStatus[0]" bgColor="#f2f2f2" />
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 审核中 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view v-if="carList[1].length === 0" class="empty">
								<u-empty mode="data"></u-empty>
							</view>
							<car-box v-else v-for="item in carList[1]" :car="item" :tab="1"/>
							<u-loadmore v-if="loadStatus[1] !=='loadmore'" :status="loadStatus[1]" bgColor="#f2f2f2" />
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 不可使用 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view v-if="carList[2].length === 0" class="empty">
								<u-empty mode="data"></u-empty>
							</view>
							<car-box v-else v-for="item in carList[2]" :car="item" :tab="2"/>
							<u-loadmore v-if="loadStatus[2] !=='loadmore'" :status="loadStatus[2]" bgColor="#f2f2f2" />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 确认删除框 -->
		<u-modal ref="uModal" v-model="isDelete" :show-cancel-button="true"
			 :async-close="true"
			@confirm="confirm" content="请确认是否要删除该车信息"
		/>
	</view>
</template>

<script>
	import carBox from './components/carBox.vue'
	import addCar from './components/addCar.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			carBox,
			addCar
		},
		data() {
			return {
				background: {
					backgroundColor: '#f8f8f8',

					// 导航栏背景图
					//background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				list: [{
					name: '可用车辆'
				}, {
					name: '审核中'
				}, {
					name: '不可使用'
				}],
				tabs: [
					'可用车辆',
					'审核中',
					'不可使用'
				],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				page: 1,
				isDelete: false
			};
		},
		computed: {
			...mapGetters([
				'carList',
				'showCarInfoWindow',
				'car',
				'type',
				'name',
				'driverCode'
			])
		},
		created() {
			this.getData(0);
		},
		methods: {
			// 监听页面卸载
			onUnload() {
				console.log('页面卸载');
				// 清空车辆信息
				this.$store.dispatch('vehicle/CLEARCARLSIT');
			},
			// 从这里打开popup是新增模式
			openPopup() {
				this.$store.dispatch('vehicle/CHANGETYPE','add');
				this.$store.dispatch('vehicle/CHANGEINFOWINDOW',true)
			},
			// 新增车辆弹窗关闭
			close() {
				console.log("弹窗关闭");
				this.$store.dispatch('vehicle/CHANGEINFOWINDOW', false);
				this.$store.dispatch('vehicle/CHANGECURRENTCAR',{});
			},
			submit(data) {
				if (this.type === 'add') {
					this.$store.dispatch('vehicle/SAVECAR', Object.assign(data,{driverCode: this.driverCode})).then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: res.body,
								icon: 'success'
							});
							 this.$store.dispatch('vehicle/CHANGEINFOWINDOW',false);
						} else {
							uni.showToast({
								title: '保存失败，请查看是否输入已存在车辆',
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
				if(this.type === 'edit') {
					delete data.modifyDate;
					delete data.createDate;
					this.$store.dispatch('vehicle/UPDATECAR', data).then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: res.body,
								icon: 'success'
							});
							 this.$store.dispatch('vehicle/CHANGEINFOWINDOW',false);
						} else {
							uni.showToast({
								title: '修改失败，请查看是否输入已存在车辆',
								icon: 'none',
								duration: 2000
							});
						}
					})
				}	
			},
			deleteCar() {
				this.isDelete = true;
			},
			// 确认删除
			confirm() {
				let ids = [];
				ids.push(this.car.id);
				this.$store.dispatch('vehicle/DELETECAR', ids)
				.then(res => {
					if(res.code === 200){
						uni.showToast({
							title: res.body,
							icon: 'success'
						});
						this.isDelete = false;
						this.$store.dispatch('vehicle/GETCARLISTUSEABLE', {
							page: 1,
							limit: 4,
							driverName: this.name,
							state: 4
						})
					}
				})
				
			},
			// 监听用户下拉刷新
			onPullDownRefresh() {
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			// 想后端发起请求，获取数据
			getData(index) {
				let carState = 0;
				if(index === 0){
					carState = 4;
				} else if (index === 1) {
					carState = 2;
				} 
				let needPage = this.carList[index].length / 4 + 1
				this.$store.dispatch('vehicle/GETCARLISTUSEABLE', {
					page: needPage,
					limit: 4,
					driverName: this.name,
					carState: carState
				}).then(res => {
					if(res.code !== 200) {
						uni.showToast({
							title: '没有更多了',
							icon: 'none',
							duration: 1500
						});
					}
				})
				this.loadStatus.splice(this.current, 1, "loadmore")
			},
			reachBottom() {
				// 此tab为空数据
				if (this.current != 2) {
					this.loadStatus.splice(this.current, 1, "loading")
					this.page ++;
					setTimeout(() => {
						this.getData(this.current);
					},1000)
				}
			},
			showLoading: function() {
				uni.showLoading({
					title: 'loading'
				});

				// #ifdef MP-ALIPAY
				this._showTimer && clearTimeout(this._showTimer);
				this._showTimer = setTimeout(() => {
					this.hideLoading();
				}, 3000)
				// #endif
			},
			hideLoading: function() {
				uni.hideLoading();
			},
			// tab栏切换
			change(index) {
				console.log(index);
				this.swiperCurrent = index;
				this.getData(index);
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>
<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss">
	.navbar-right {
		margin-right: 24rpx;
		display: flex;

		.right-item {
			margin: 0 12rpx;
			position: relative;
			color: #eae3e5;
			font-size: 26rpx;
		}

	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		
		.u-tabs-box {
			z-index: 900;
		}
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;

		.page-box {
			display: flex;
			flex-direction: column;
			justify-items: center;

			.empty {
				margin: 50% auto;
			}
		}
	}
</style>
